<template>
	<view class="content" :style="'background: url('+ c_imgPath + 'mine/indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">
		<view class="text">
			<view class="text_top">
				<view class="text_top_title">至支付宝</view>
				<view class="text_top_num">剩余:<text>{{userinfo.money}}</text></view>
			</view>
			<view class="text_desc">
				注意：整点平台将扣除 <text>{{userinfo.withdraw_rate}}%</text> 的手续费
			</view>
		</view>
		<view class="input">
			<input placeholder="请输入整点金额" v-model="money" type="number" />
		</view>
		<view class="up">
			<view class="up_title">支付宝收款码</view>
			<view class="up_img" @click="selImg">
				<image :src="c_imgPath + 'add_Img.png'" v-if="!alPay_img"></image>
				<image :src="alPay_img" v-else></image>
			</view>
		</view>
		<view class="btn">
			<view class="item" :style="'background: url('+ c_imgPath + 'zhengdian.png'+ ') repeat-y 0 0 / 100% 100%;'"
				@click="gotoPage('/pages/user/withdraw/record')">
				记录
			</view>
			<view class="item1" :style="'background: url('+ c_imgPath + 'zhengdian.png'+ ') repeat-y 0 0 / 100% 100%;'"
				@click="submit">
				提交申请
			</view>
		</view>
		<view class="radio" @click="radio = !radio">
			<view class="radio_img">
				<image :src="c_imgPath + 'detail/yuan'+ (radio?'_sel':'') +'.png'"></image>
			</view>
			<view class="radio_text">
				同意【敏感个人信息处理征求函】并确认【当日最大整点额度{{userinfo.max_withdraw_money}}元，单日最多拿整点{{userinfo.withdraw_num}}次】并确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				c_imgPath: 'https://qt.yhemall.com/',
				t_imgPath: '/static/',
				userinfo: '',
				money: '',
				radio: false,
				alPay_img: '',
				alPay_url: ''
			}
		},
		onLoad() {
			this.getUser();
		},
		methods: {
			submit() {
				let that = this;
				if (!this.radio) {
					uni.showToast({
						title: '请同意并确认协议',
						icon: 'error'
					})
					return
				}
				that.req({
					url: 'withdraw',
					data: {
						type: 2,
						money: that.money,
						code: that.alPay_url
					},
					success(res) {
						if (res.status == 1) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								success() {
									setTimeout(() => {
										that.alPay_img = '';
										that.alPay_url = '';
										that.money = '';
										that.getUser();
									}, 1000)
								}
							})
						}
					}
				})
			},

			/*
				选择图片
			*/
			selImg() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						_this.upImg(res.tempFilePaths[0])
					}
				});
			},
			upImg(url) {
				let that = this;
				uni.uploadFile({
					url: that.siteBaseUrl + 'picture',
					filePath: url,
					name: 'file',
					success(e) {
						let res = JSON.parse(e.data)
						if (res.status == 1) {
							that.alPay_img = res.data.path;
							that.alPay_url = res.data.imgurl;
						}
					}
				})
			},
			getUser() {
				let that = this;
				that.req({
					url: 'user',
					success(res) {
						if (res.status == 1) {
							that.userinfo = res.data.userinfo;
							uni.setStorageSync('userinfo', that.userinfo)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		min-height: 100vh;
		padding: 20rpx;
		background: #09081C;
		box-sizing: border-box;
	}

	.text {
		.text_top {
			display: flex;
			align-items: center;

			.text_top_title {
				flex: 1;
				font-size: 36rpx;
				font-weight: 400;
				background: linear-gradient(180deg, #E7CBFF 0%, #B75AFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.text_top_num {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;

				text {
					color: #BC66FF;
				}
			}
		}

		.text_desc {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 20rpx;

			text {
				color: #BC66FF;
			}
		}
	}

	.input {
		height: 48rpx;
		background: linear-gradient(180deg, rgba(45, 44, 74, 0.45) 0%, rgba(72, 73, 91, 0.45) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 1rpx solid;
		border-image: linear-gradient(180deg, rgba(93.00000205636024, 88.00000235438347, 104.00000140070915, 1), rgba(146.00000649690628, 148.000006377697, 154.00000602006912, 1)) 1 1;
		padding: 10rpx 20rpx;
		margin-top: 20rpx;

		input {
			height: 48rpx;
			font-size: 26rpx;
			color: #FFFFFF;
		}
	}

	.up {
		margin-bottom: 20rpx;

		.up_title {
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 20rpx 0;
		}

		.up_img {
			image {
				width: 240rpx;
				height: 240rpx;
			}
		}
	}

	.btn {
		display: flex;
		align-items: center;

		.item,
		.item1 {
			width: 330rpx;
			height: 78rpx;
			line-height: 78rpx;
			margin: auto;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.item1 {
			color: #BC66FF;
		}
	}

	.radio {
		display: flex;
		align-items: center;
		padding-top: 30rpx;

		.radio_img {
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.radio_text {
			flex: 1;
			margin-left: 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>